<script setup lang="ts">
import {deleteMomentService, getMyMomentListService} from '@/apis/front/circle'
import type { MomentVO } from '@/types/vo/MomentVO'
import type { MomentQuery } from '@/types/query/MomentQuery'
import { Icon } from '@iconify/vue'

const getMyMomentParams = ref<MomentQuery>({
  pageNum: 1,
  pageSize: 10,
})

const momentList = ref<MomentVO[]>([])

const getMyMomentList = async () => {
  if (noMore.value) {
    return
  }
  try {
    loading.value = true
    const res = await getMyMomentListService(getMyMomentParams.value!)
    momentList.value.push(...res.data.data.records)
    if (res.data.data.records.length < getMyMomentParams.value!.pageSize!) {
      noMore.value = true
    }
  } finally {
    loading.value = false
  }
}

const noMore = ref(false)
const loading = ref(false)
const handleLoad = () => {
  if (noMore.value || loading.value) {
    return
  }
  getMyMomentParams.value!.pageNum! += 1
  getMyMomentList()
}
onMounted(() => {
  getMyMomentList()
})
const message = useMessage()
const onConfirm = async (item: MomentVO) => {
  await deleteMomentService(item.id!)
  message.success('删除成功')
  momentList.value = momentList.value.filter(moment => moment.id !== item.id)
}
</script>

<template>
  <div class="flex gap-6 w-full h-full bg-gray-50 p-4">
    <n-infinite-scroll :distance="10" @load="handleLoad" class="flex-1 pr-6">
      <div class="flex flex-col gap-4">
        <div
          v-for="item in momentList"
          :key="item.id"
          class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300 border border-gray-100"
        >
          <div class="text-gray-800 text-base leading-6 mb-4">
            {{ item.content }}
          </div>
          <div class="grid grid-cols-7 gap-2 mb-4">
            <n-image
              v-for="img in item.picUrls"
              :key="img"
              :src="img"
              width="100px"
              height="100px"
              class="rounded-lg aspect-square"
              object-fit="cover"
            />
          </div>
          <div class="flex justify-between items-center">
            <div class="text-gray-500 hover:text-blue-500 transition-colors cursor-pointer flex items-center">
              <Icon icon="ant-design:comment-outlined" class="mr-1" />
              <span>评论 ({{ item.replyCount || 0 }})</span>
            </div>
            <n-popconfirm @positive-click="() => onConfirm(item)">
              <template #trigger>
                <n-button type="error" size="small" class="shadow-sm" secondary>
                  <template #icon>
                    <Icon icon="material-symbols-light:delete-outline-rounded" />
                  </template>
                  删除
                </n-button>
              </template>
              {{'你确定要删除吗'}}
            </n-popconfirm>
          </div>
        </div>

        <div v-if="loading" class="flex justify-center py-4">
          <n-spin size="small" />
        </div>
        <div v-if="noMore" class="text-center text-gray-400 py-4">
          没有更多内容了
        </div>
      </div>
    </n-infinite-scroll>

    <div class="h-full flex flex-col gap-4 w-72 shrink-0">
      <UserCard />
      <RecommendCard />
    </div>
  </div>
</template>

<style scoped>
/* 自定义滚动条样式 */
.n-infinite-scroll {
  scrollbar-width: thin;
  scrollbar-color: #e5e7eb #f3f4f6;
}

.n-infinite-scroll::-webkit-scrollbar {
  width: 6px;
}

.n-infinite-scroll::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.n-infinite-scroll::-webkit-scrollbar-thumb {
  background-color: #e5e7eb;
  border-radius: 4px;
}

/* 图片悬停效果 */
.n-image {
  transition: transform 0.2s;
}

.n-image:hover {
  transform: scale(1.03);
}
</style>
